<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="user">
        <label>用户名:<input type="text" placeholder="请输入姓名"></label><br>
        <label> 年龄:<input type="number"></label>
    </div>
    <div id="sex">
        性别<br>
        <label>男:<input type="radio" name="sex" checked></label>
        <label>女:<input type="radio" name="sex"></label>
    </div>
    <div id="hobby">
        爱好:<br>
        <label> 学习 <input type="checkbox" value="h1"></label>
        <label>健身 <input type="checkbox" value="h2"></label>
        <label>游泳 <input type="checkbox" value="h3"></label>
        <label>工作 <input type="checkbox" value="h4"></label>
        <label>看电影 <input type="checkbox" value="h5"></label>
    </div>
    <label>全选/全不选<input type="checkbox" id="checkAll" ></label>
    <button id="notCheck">反选</button>
    <br> 学历:
    <select>
        <option value="小学">小学</option>
        <option value="中学">中学</option>
        <option value="高中">高中</option>
        <option value="大学">大学</option>
    </select>
    <br>
    <button onclick="add()">添加</button>
    <br>
    <table id="tab">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>学历</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
    <script>
        var arr = [];
        var count = 0;
        var users = document.querySelectorAll('#user input');
        var s = document.querySelectorAll('#sex input');
        var sel = document.getElementsByTagName('select')[0];
        var ho = document.querySelectorAll('#hobby input');
        var all = document.getElementById('checkAll');
        var notCheck = document.getElementById('notCheck');
        var tbody = document.getElementById('tbody');

        function add() {
            arr.push({});
            var name = users[0].value;
            var age = users[1].value;
            if (name && age) {
                arr[count].name = name;
                arr[count].age = age;
            } else {
                alert('用户名和年龄不能为空');
                return;
            }
            sex();
            education();
            hobby();
            render();
            count++;
        }

        function sex() {
            var sValue = s[0].checked ? '男' : '女';
            arr[count].sex = sValue;
        }

        function education() {
            var value = sel.value;
            arr[count].education = value;
        }

        function hobby() {
            var arr1 = [];
            for (var i = 0; i < ho.length; i++) {
                if (ho[i].checked) {
                    arr1.push(hValue(ho[i].value));
                }
            }
            arr[count].hobby = arr1.join(',');
        }

        function hValue(h) {
            switch (h) {
                case 'h1':
                    return '学习';
                case 'h2':
                    return '健身';
                case 'h3':
                    return '游泳';
                case 'h4':
                    return '工作';
                case 'h5':
                    return '看电影';
            }
        }
        all.onclick = function() {
            for (var i = 0; i < ho.length; i++) {
                ho[i].checked = this.checked;
            }
        }
        notCheck.onclick = function() {
            for (var i = 0; i < ho.length; i++) {
                ho[i].checked = !ho[i].checked;
            }
            judgment();
        }
        for (var i = 0; i < ho.length; i++) {
            ho[i].onclick = function() {
                judgment();
            }
        }

        function judgment() {
            var key = true;
            for (var i = 0; i < ho.length; i++) {
                if (!ho[i].checked) {
                    key = false;
                }
            }
            all.checked = key;
        }

        function render() {
            tbody.innerHTML = '';
            var str = '';
            for (var i = 0; i < arr.length; i++) {
                str += `
                    <tr>
                        <td>${i}</td>
                        <td>${arr[i].name}</td>
                        <td>${arr[i].age}</td>
                        <td>${arr[i].sex}</td>
                        <td>${arr[i].education}</td>
                        <td>${arr[i].hobby}</td>
                        <td>
                            <a>编辑</a>
                            <a onclick="b(${i})">删除</a>
                        </td>
                    </tr>
                `;
            }
            tbody.innerHTML = str;
        }

        function b(i) {
            arr.splice(i, 1);
            render();
        }
    </script>
</body>

</html>